<template>
  <pre><code ref="codeBlock" class="language-typescript">{{ code }}</code></pre>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css'; // 选择你喜欢的主题

export default defineComponent({
  props: {
    code: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const codeBlock = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (codeBlock.value) {
        hljs.highlightElement(codeBlock.value);
      }
    });

    return {
      codeBlock,
    };
  },
});
</script>

<style scoped>
pre {
  background: #f5f5f5;
  padding: 1em;
  border-radius: 5px;
}
</style>
